<template>
    <div class="listInfo">
        <slot name="left" v-if="left">
            <input type="checkbox" @change="setCheck" :checked="checked">
        </slot>
        <div class="listCenter">
            <div class="list-title">{{title}}</div>
            <div class="list-message">
                <slot name="tags"  v-if="tag">标签</slot>
                <div class="list-author">
                    作者：{{author}}
                </div>
                <slot name="kind" v-if="kind">分</slot>
                <div class="list-time">{{time}}</div>
            </div>
        </div>
        <slot name="right"></slot>
    </div>
</template>

<script>
export default {
    name: "ListInfo",
    props: {
        title:{
            default: "此处应该放置列表标题"
        },
        time:{
            default: "1970.1.1"
        },
        author:{
            default: "佚名"
        },
        left:{
            default: true
        },
        tag:{
            default: true
        },
        kind:{
            default: true
        },
        checked:{
            default: false
        },
        id:{
            required: true
        }
    },
    methods: {
        setCheck (event){
            this.$emit("changeCheck", event.target.checked, this.id)
        }
    },
}
</script>

<style lang="less">
.listInfo{
    height:60px;
    display:flex;
    align-items:center;
    .listLeft{
        margin-right:20px;
    }
    .listCenter{
        flex:1;
        .list-title{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width:400px;
        }
        .list-message{
            display:flex;
            align-items:center;
            font-size:12px;
            &>*{
                margin-right:10px;
            }
            .list-tags{
                span{
                    display:inline-block;
                    margin:0 1px;
                    border-radius:2px;
                    border:solid 1px red;
                }
            }
        }
    }
    .listRight{
        margin-left:20px;
    }
}
</style>